import { observer } from 'mobx-react'
import React from 'react'
import type { PopconfirmProps } from 'antd'
import { Layout, Input, Tree, Button, Form, Select, Table, Row, Col, DatePicker, Divider, Popconfirm, message } from 'antd'
import type { DataNode } from 'antd/es/tree'
import { useNavigate } from 'react-router-dom'

const { Sider, Content } = Layout
const { RangePicker } = DatePicker
const treeData: DataNode[] = [
  {
    title: '开发部门',
    key: '0',
    children: [
      { title: '后端开发部', key: '0-0' },
      { title: 'JAVA开发部', key: '0-1' },
      { title: '前端开发部', key: '0-2' },
    ],
  },
]

const SearchForm: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('提交的搜索条件：', values)
  }

  return (
    <div className="filterForm">
      <Form
        layout="inline"
        onFinish={onFinish}
        style={{ flex: 1 }}
      >
        <Form.Item label="用户" name="username">
          <Input placeholder="请输入用户名/姓名" />
        </Form.Item>
        <Form.Item label="岗位" name="post">
          <Select placeholder="全部">
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="财务">财务</Select.Option>
            <Select.Option value="运营">运营</Select.Option>
            <Select.Option value="开发">开发</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="操作人" name="operator">
          <Input placeholder="请输入操作人" />
        </Form.Item>
        <Form.Item label="状态" name="status">
          <Select placeholder="全部">
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="正常">正常</Select.Option>
            <Select.Option value="禁用">禁用</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="角色" name="role">
          <Select placeholder="全部">
            <Select.Option value="">全部</Select.Option>
            <Select.Option value="管理员">管理员</Select.Option>
            <Select.Option value="编辑员">编辑员</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="操作时间" name="time">
          <RangePicker placeholder={['开始日期', '结束日期']} />
        </Form.Item>
      </Form>
      <div className="rightAction">
        <Button type="primary" htmlType="submit">
          查询
        </Button>
        <Button>
          重置
        </Button>
      </div>
    </div>
  )
}

const StaffManagement: React.FC = () => {
  const navigate = useNavigate()
  const [treeSelectKeys, setTreeSelectKeys] = React.useState<string[]>([])

  const onTreeSelect = (selectedKeys: React.Key[]) => {
    setTreeSelectKeys(selectedKeys as string[])
    // 根据选中的部门 key，去刷新右侧表格数据
  }

  const onSearchDept = (value: string) => {
    // 搜索部门名称
  }

  const handleResetPassword = (record: any) => {
    console.log(record, 'record')
  }
  const handleEdit = (record: any) => {
    console.log(record, 'record')
    // navigate('/setting/enterpriseManagement/staffManagement/edit', { state: { record } })
  }

  const handleEnable = (record: any) => {
    console.log(record, 'record')
  }

  const handleDisable = (record: any) => {
    console.log(record, 'record')
  }
  const handleDelete = (record: any) => {
    console.log(record, 'record')
  }

  // 新增按钮
  const handleCreate = () => {
    navigate('/setting/enterpriseManagement/staffManagement/edit')
  }
  const handleConfirm: PopconfirmProps['onConfirm'] = (e) => {
    console.log(e)
    message.success('点击确定')
  }
  const handleCancel: PopconfirmProps['onCancel'] = (e) => {
    console.log(e)
    message.error('点击取消')
  }
  return (
    <div className='OP7-sub-layout-L-R'>
      {/* 左侧侧边栏 */}
      <Sider
        width={300}
        className='OP7-left'
      >
        <Input.Search
          className='custom-input'
          placeholder="请输入部门名称"
          onSearch={onSearchDept}
          style={{ marginBottom: 16 }}
        />
        {/* 部门树 */}
        <Tree
          treeData={treeData}
          onSelect={onTreeSelect}
          defaultExpandAll
        />
      </Sider>
      {/* 右侧主区域 */}
      <div className="app-container">
        {/* 查询条件区域 */}
        <SearchForm />
        <div >
          <Button type="primary" onClick={handleCreate}>
            + 新增
          </Button>
        </div>
        <Table
          columns={[
            { title: '序号', dataIndex: 'index' },
            { title: '用户名', dataIndex: 'username' },
            { title: '岗位', dataIndex: 'position' },
            { title: '角色', dataIndex: 'role' },
            { title: '状态', dataIndex: 'role' },
            { title: '操作人', dataIndex: 'role' },
            { title: '操作时间', dataIndex: 'role' },
            {
              title: '操作',
              width: 200,
              fixed: 'right',
              render: (text, record: any) => (
                <div className='table-cell-actions'>
                  <Button type="link" onClick={() => handleResetPassword(record)}>密码</Button>
                  <Button type="link" onClick={() => handleEdit(record)}>修改</Button>
                  {record.status === '禁用' ? (
                    <Button type="link" onClick={() => handleEnable(record)}>
                      启用
                    </Button>
                  ) : (
                    <Button type="link" onClick={() => handleDisable(record)}>
                      禁用
                    </Button>
                  )}
                  <Popconfirm
                    key="delete"
                    placement="topRight"
                    title="确定要删除吗?"
                    onConfirm={handleConfirm}
                    onCancel={handleCancel}
                    okText="确定"
                    okType="danger"
                    cancelText="取消"
                  >
                    <Button
                      type="link"
                      danger
                      key="delete"
                    >
                      删除
                    </Button>
                  </Popconfirm>
                </div>
              ),
            },
          ]}
          dataSource={[
            { index: 1, username: 'admin', name: '万大', position: '部门负责人', role: '管理员' },
            { index: 2, username: 'admin1', name: '万大', position: '部门负责人1', role: '超级管理员1' },
          ]}
          rowKey="index"
          tableLayout="fixed"
          scroll={{ x: 1200 }}
        />
      </div>
    </div>
  )
}

export default observer(StaffManagement)